<script>

import { ArrowUpBold, ArrowDownBold, CloseBold } from '@element-plus/icons'

export default {
  data: function () {
    return {
      'counter': 0
    }
  },
  methods: {
    up: function () { this.counter++; window.localStorage.setItem('counter', this.counter) },
    down: function () { this.counter > 0 && this.counter--; window.localStorage.setItem('counter', this.counter) },
    clear: function () { this.counter = 0; window.localStorage.setItem('counter', this.counter) },
  },
  mounted: function () {
    var data = window.localStorage.getItem('counter');
    this.counter = data ? parseInt(data) : 0;
  },
  components: {
    ArrowUpBold,
    ArrowDownBold,
    CloseBold
  }
}
</script>

<template>
  <el-row>
    <el-col :span="6" :offset="9" class="dashboard">
      {{ counter }}
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="2" :offset="9">
      <el-button @click="up" type="primary">
        <el-icon class="align-middle"><arrow-up-bold /></el-icon>
        &nbsp;&nbsp;Up
      </el-button>
    </el-col>
    <el-col :span="2">
      <el-button @click="clear" type="danger">
        <el-icon class="align-middle"><close-bold /></el-icon>
        &nbsp;&nbsp;Clear
      </el-button>
    </el-col>
    <el-col :span="2">
      <el-button :disabled="!counter" @click="down" type="primary">
        <el-icon class="align-middle"><arrow-down-bold /></el-icon>
        &nbsp;&nbsp;Down
      </el-button>
    </el-col>
  </el-row>
</template>

<style scoped>
  .dashboard {
    font-size: 40px;
    font-weight: bold;
    height: 80px;
    line-height: 80px;
    background-color: #AAAAAA;
    margin-bottom: 40px;
  }
  .align-middle {
    vertical-align: middle;
  }
</style>
